<template>
    <div>
        <Row style="margin-bottom: 20px;">
            <Col span="5">
            <Card style="width:250px; height: 240px;">
               <img style="width:180px; height: 180px;margin-left:18px;" src="../assets/lalali.jpg" /> 
                <div class="card-list">
                  <el-upload
                 class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture">
               <el-button size="small" icon="upload" type="primary" style="margin-left:40px;">点击上传</el-button>
               </el-upload>
                </div>
            </Card>
             </Col>
            <Col span="5" offset="1">
            <Card style="width:250px; height: 200px;">
                <p slot="title">管理员信息详情</p>
                <p style="font-size: 14px;padding-top: 10px;">
                    姓名：
                    <span class="card-span-color"><span>小月月</span> </span>
                </p>
                <p style="font-size: 14px;padding-top: 10px;">
                    昵称：
                    <span class="card-span-color"><span>XYY123456</span> </span>
                </p>
                <p style="font-size: 14px;padding-top: 10px;">
                    绑定邮箱：
                    <span class="card-span-color"><span>163.256.9@163.com</span> </span>
                </p>
                <p style="font-size: 14px;padding-top: 10px;">
                    绑定手机：
                    <span class="card-span-color"><span>13310xxxxxx</span> </span>
                </p>
            </Card>
            </Col>
            <Col span="5" offset="1">
            <Card style="width:250px; height: 200px;">
                <p slot="title">处理事件完成度：</p>
                <el-progress type="circle" :percentage="25"></el-progress>
            </Card>
            </Col>
            <Col span="5" offset="1">
         <Card style="width:250px; height: 200px;"> 
               <p slot="title">备忘录：</p>
  
 <el-steps direction="vertical" :active="1">
    <el-step title="登录"></el-step>
    <el-step title="作业管理"></el-step>
    <el-step title="学生信息更新"></el-step>
    <el-step title="教师信息更新" ></el-step>
     </el-steps>

           </Card> 
            </Col>
        </Row>
          <el-divider > ❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥❥
</el-divider>
        <Row>
            <Col span="11">
            <Card style="width:1066px; height: 350px;">
             <el-timeline>
    <el-timeline-item timestamp="2018/4/12" placement="top">
      <el-card>
        <h4>更新班级信息</h4>
        <p>小月月 提交于 2018/4/12 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="top">
      <el-card>
        <h4>更新学生信息</h4>
        <p>小月月 提交于 2018/4/3 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/2" placement="top">
      <el-card>
        <h4>更新学生信息</h4>
        <p>小月月 提交于 2018/4/2 20:46</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
            </Card>
            </Col>
        </Row>
    </div>
    
</template>
 
<script>
    export default {
        data() {
            return {
                isCollapsed: false,
                charts: '',
                 fileList: []
            };
        },
        methods: {
             handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
        },
        //调用
    }
</script>
 
<style scoped="scoped">
    .card-big-font {
        font-size: 36px;
        color: #666;
        line-height: 36px;
        padding: 5px 0 10px;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        margin-bottom: 5px;
    }
    .card-span-color {
        position: absolute;
        right: 15px;
    }
</style>